<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="24">
          <el-form-item :label="$t('申请标题')" prop="applyTitle">
            <el-input v-model="form.applyTitle" :placeholder="$t('申请标题')" show-word-limit maxlength="100" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议类型')" prop="meetingType">
            <el-select v-model="form.meetingType" filterable :placeholder="$t('会议类型')">
              <el-option
                v-for="dict in meetingTypeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictLabel)"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('会议时间')" prop="meetingTime">
            <el-date-picker
              v-model="form.meetingTime"
              clearable
              style="width: 200px"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('会议时间')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('我方参会人员')" prop="ourParticipants">
            <el-input v-model="form.ourParticipants" :placeholder="$t('我方参会人员')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('其他参会人员')" prop="otherParticipants">
            <el-input v-model="form.otherParticipants" :placeholder="$t('其他参会人员')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="margin-top: 15px">
        <!--议案列表-->
        <div class="area-header">
          <span class="area-header-title">{{ $t('议案列表') }}</span>
        </div>
        <el-table :data="form.bfPostMeetBillList" border class="nowrapTable formTable">
          <el-table-column :label="$t('序号')" type="index" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('议题内容')" align="center" min-width="160">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('议题内容') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'bfPostMeetBillList.' + scope.$index + '.topicContent'" :rules="bfPostMeetBillListRules.topicContent">
                <el-input v-model="scope.row.topicContent" :placeholder="$t('议题内容')" maxlength="32" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('我方表决')" align="center" min-width="160">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('我方表决') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'bfPostMeetBillList.' + scope.$index + '.ourVote'" :rules="bfPostMeetBillListRules.ourVote">
                <el-select v-model="scope.row.ourVote">
                  <el-option
                    v-for="dict in ourVoteOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('说明')" align="center" min-width="160">
            <template slot-scope="scope">
              <el-form-item :prop="'bfPostMeetBillList.' + scope.$index + '.explainDetail'">
                <el-input v-model="scope.row.explainDetail" :placeholder="$t('说明')" maxlength="32" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="!otherBtnHide" :label="$t('操作')" align="center" width="60px">
            <template slot-scope="scope">
              <el-button v-hasPermi="['bf:postInvestMeet:remove']" type="text" icon="el-icon-delete" @click="delPostMeetBillHandle(scope.$index, scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <div v-if="!otherBtnHide" class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addPostMeetBillList">{{ $t('添加') }}</el-button>
        </div>
      </div>
      <div style="margin-top: 15px">
        <!--项目信息-->
        <div class="area-header">
          <span class="area-header-title">{{ $t('项目信息') }}</span>
        </div>
        <el-table :data="form.bfProjectInfoList" border class="nowrapTable formTable">
          <el-table-column :label="$t('序号')" type="index" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('公司名称')" align="center" min-width="160">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('公司名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'bfProjectInfoList.' + scope.$index + '.companyName'" :rules="bfProjectInfoListRules.companyName">
                <el-input v-model="scope.row.companyName" :placeholder="$t('公司名称')" maxlength="32" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('项目名称')" align="center" min-width="160">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('项目名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'bfProjectInfoList.' + scope.$index + '.projectName'" :rules="bfProjectInfoListRules.projectName">
                <el-input v-model="scope.row.projectName" :placeholder="$t('项目名称')" maxlength="32" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('关注等级')" align="center" min-width="160">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('关注等级') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'bfProjectInfoList.' + scope.$index + '.attentionLevel'" :rules="bfProjectInfoListRules.attentionLevel">
                <el-select v-model="scope.row.attentionLevel" filterable>
                  <el-option
                    v-for="dict in attentionLevelOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="!otherBtnHide" :label="$t('操作')" align="center" width="60px">
            <template slot-scope="scope">
              <el-button v-hasPermi="['bf:postInvestMeet:remove']" type="text" icon="el-icon-delete" @click="delProjectInfoHandle(scope.$index, scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <div v-if="!otherBtnHide" class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addProjectInfoList">{{ $t('添加') }}</el-button>
        </div>
      </div>
      <FileTable :list.sync="form.fileList" data-type="post_invest_meet" :business-id="getDealId" :btn-show="!otherBtnHide" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <FormBtn ref="formBtn" :bus-data="form" :btn-hide="btnHide" has-permi="bf:postInvestMeet" :menu-key="menuKey" />
    </div>
  </div>
</template>

<script>
    import { saveBfPostInvestMeet, getBfPostInvestMeet } from '@/api/bf/postInvestMeet/bfPostInvestMeet'
    import { delBfPostMeetBill } from '@/api/bf/postMeetBill/bfPostMeetBill'
    import { delBfProjectInfo } from '@/api/bf/projectInfo/bfProjectInfo'
    export default {
        data() {
            return {
              // 菜单标识
              menuKey: 'post_invest_meet',
                // 表单参数
                form: {
                  bfPostMeetBillList: [],
                  bfProjectInfoList: []
                },
                // 遮罩层
                loading: false,
                // 是否隐藏保存按钮
                btnHide: false,
                otherBtnHide: false,
                // 项目id
                getDealId: this.$route.query.id,
                // 会议类型
                meetingTypeOptions: [],
                // 我方表决类型
                ourVoteOptions: [],
                // 关注等级
                attentionLevelOptions: [],
                // 表单校验
                rules: {
                  applyTitle: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ], meetingType: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ]
                },
                // 议案列表
                bfPostMeetBillListRules: {
                  topicContent: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  ourVote: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
                },
                // 议案列表
                bfProjectInfoListRules: {
                  companyName: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  projectName: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                  attentionLevel: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
                }
            }
        },
        created() {
          // 会议类型
          this.getDicts('post_meeting_type').then(response => {
            this.meetingTypeOptions = response.data
          })
          // 我方表决类型
          this.getDicts('our_vote').then(response => {
            this.ourVoteOptions = response.data
          })
          // 关注等级
          this.getDicts('attention_level').then(response => {
            this.attentionLevelOptions = response.data
          })
          this.$bus.$emit('async_done')
        },
        methods: {
            // 初始化数据
            init(data) {
              this.loading = true
                if (data != null && data.id !== undefined) {
                    getBfPostInvestMeet(data.id).then(response => {
                        this.form = response.data
                      this.loading = false
                    })
                } else {
                    this.reset()
                  this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    dealId: this.$route.query.id,
                    actId: undefined,
                    actStatus: undefined,
                    applyTitle: undefined,
                    meetingType: undefined,
                    meetingTime: undefined,
                    ourParticipants: undefined,
                    otherParticipants: undefined,
                    remark: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    delFlag: undefined,
                    bfPostMeetBillList: [],
                    bfProjectInfoList: []
                }
                this.resetForm('form')
            },
            // 议案列表
            addPostMeetBillList() {
              const row = {
                id: undefined,
                postMeetId: '',
                dealId: '',
                topicContent: '',
                ourVote: '',
                explainDetail: '',
                remark: ''
              }
              if (!(this.form.bfPostMeetBillList instanceof Array)) {
                this.$set(this.form, 'bfPostMeetBillList', [])
              }
              this.$nextTick(() => {
                this.form.bfPostMeetBillList.push(row)
              })
            },
            // 删除议案列表
            delPostMeetBillHandle(index, row) {
              // eslint-disable-next-line no-undef
              const id = row.id
              if (id !== undefined && id !== '' && id != null) {
                this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                  confirmButtonText: this.$t('确定'),
                  cancelButtonText: this.$t('取消'),
                  type: 'warning'
                })
                  .then(function() {
                    return delBfPostMeetBill(id)
                  }).then(() => {
                  this.form.bfPostMeetBillList.splice(index, 1)
                  return this.msgSuccess(this.$t('删除成功'))
                })
                  .catch(function() {})
              } else {
                this.form.bfPostMeetBillList.splice(index, 1)
              }
            },
            // 添加项目信息
            addProjectInfoList() {
              const row = {
                id: undefined,
                postMeetId: '',
                dealId: '',
                companyName: '',
                projectName: '',
                attentionLevel: '',
                remark: ''
              }
              if (!(this.form.bfProjectInfoList instanceof Array)) {
                this.$set(this.form, 'bfProjectInfoList', [])
              }
              this.$nextTick(() => {
                this.form.bfProjectInfoList.push(row)
              })
            },
            // 删除项目信息
            delProjectInfoHandle(index, row) {
              // eslint-disable-next-line no-undef
              const id = row.id
              if (id !== undefined && id !== '' && id != null) {
                this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                  confirmButtonText: this.$t('确定'),
                  cancelButtonText: this.$t('取消'),
                  type: 'warning'
                })
                  .then(function() {
                    return delBfProjectInfo(id)
                  }).then(() => {
                  this.form.bfProjectInfoList.splice(index, 1)
                  return this.msgSuccess(this.$t('删除成功'))
                })
                  .catch(function() {})
              } else {
                this.form.bfProjectInfoList.splice(index, 1)
              }
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
          /** 提交按钮 */
          submitForm: function(type) {
            return new Promise((resolve, reject) => {
              console.log(this.form, 'form')
              this.$refs['form'].validate(valid => {
                // 验证数据
                if (valid) {
                  // 弹出遮罩层
                  this.loading = true
                  // 保存方式，如果值为actSave则是从流程表单中进行的保存，默认将delFlag 设置为2,审批通过后在更新为0
                  this.form.saveType = type
                  // 保存数据
                  saveBfPostInvestMeet(this.form).then(response => {
                    if (response.code === 200) {
                      // 点击的按钮是保存并启动流程
                      this.form.id = response.data.id
                      if (type === 'process') {
                        // 启动流程
                        this.startProcess(response.data.id)
                        // 点击的仅保存
                      } else {
                        this.msgSuccess(this.$t('保存成功'))
                        // 关闭form页面
                        this.closeForm()
                      }
                      resolve(response.data.id)
                    } else {
                      this.msgError(response.msg)
                      this.loading = false
                      reject(response)
                    }
                  })
                } else {
                  this.locationError(document)
                  reject()
                }
              })
            })
          },
          // 启动流程
          startProcess: function(dataId) {
            this.loading = false
            // 启动流程时候传入的参数
            const processData = {}
            // 待办标题
            processData.title = this.form.applyTitle
            // 业务表名
            processData.dataTable = 'bf_post_invest_meet'
            // 业务ID
            processData.dataId = dataId
            // 业务表单地址(待办页面需要打开的页面)
            processData.formPath = '@/views/bf/postInvestMeet/bfPostInvestMeetForm'
            processData.viewPath = '@/views/bf/postInvestMeet/bfPostInvestMeetView'
            // 菜单标识(根据菜单标识判断的走哪个流程)
            processData.menuKey = this.menuKey
            this.startProcessByMenu(processData, () => {
              this.form.actStatus = 'D'
              this.msgSuccess(this.$t('数据保存成功,流程启动成功'))
              this.closeForm()
            })
          }

        }

    }
</script>
